<template>
  <div id="mine">
    <!-- 登录 -->
    <div v-if="getUserInfo" class="userInfo">
      <van-image
        round
        width="1rem"
        height="1rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <van-cell :value="getUserInfo.nickname" />
      <van-button @click="logout" type="danger">退出</van-button>
    </div>
    <!-- 未登录，让他去登录 -->
    <div v-else class="userInfo">
      <van-image round width="1rem" height="1rem" :src="Defaultmap" />
      <van-cell value="小U" />
      <van-button @click="$router.push('/login')" type="info"
        >请登录</van-button
      >
    </div>
    <!-- 展示性列表 -->、
    <van-cell title="地址管理" icon="location-o" is-link />
    <van-cell
      title="我的钱包"
      icon="pending-payment"
      is-link
      value="剩余200U币"
    />
    <van-cell title="我的二维码" icon="qr" is-link />
    <van-cell title="我的小伙伴" icon="friends-o" is-link />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      Defaultmap: require("@/assets/images/mine/dftouxiang.jpg"),
    };
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  methods: {
    ...mapActions(["changeUserAction"]),
    //退出事件
    logout() {
      //触发行动
      this.changeUserAction(false);
      //跳转到登录页
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="" scoped>
.userInfo {
  text-align: center;
}
.userInfo >>> .van-cell__value--alone {
  text-align: center;
}
#mine >>> .van-cell__left-icon {
  color: #FF6245;
}
</style>